<template>
  <div id="notice">
    <div class="table">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>历史发布公告</span>
          <el-button
            style="float: right; margin-right: 10%"
            type="text"
            @click="loadNotices"
            >刷新</el-button
          >
        </div>
        <el-table 
        :data="notice_list" 
        border style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column fixed prop="noticeId" label="索引">
          </el-table-column>
          <el-table-column prop="adminId" label="颁发的管理员ID">
          </el-table-column>
          <el-table-column prop="content" label="内容"> </el-table-column>
          <el-table-column prop="createTime" label="时间"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="deleteNotice(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-card class="box-card" shadow="hover" style="margin-top: 50px">
      <div slot="header" class="clearfix">
        <span>发布</span>
      </div>
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="发布内容" prop="content">
            <el-input v-model="ruleForm.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              <i class="el-icon-upload"></i>
              发布</el-button
            >
            <el-button @click="resetForm('ruleForm')">
              <i class="el-icon-delete-solid"></i>
              重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "notice",
  data() {
    return {
      notice_list: [],
      ruleForm: {
        content: "",
      },
      rules: {
        content: [
          { required: true, message: "请输入公告内容", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(`http://localhost:4578/notice_json/add`, {
              content: this.ruleForm.content,
              admin: JSON.stringify(this.$cookies.get("gxsf_key")),
            })
            .then((ret) => {
              if (ret.data) {
                this.loadNotices();
                this.$message.success("发布成功");
              } else {
                this.$message.error("出错了");
              }
            });
        } else {
          this.$message.error("出错了");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    loadNotices() {
      this.axios
        .post(`http://localhost:4578/all_json/notice`, {})
        .then((ret) => {
          this.notice_list = ret.data;
        });
    },
    deleteNotice(item) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.post(`http://localhost:4578/notice_json/delete`, {
            notice: JSON.stringify(item),
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.loadNotices();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.loadNotices();
  },
};
</script>